<style lang="scss" scoped>
	.img {
		width: 100vw;
	}
	.content{
		padding: 10px;
	}
	
	.section {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		margin-bottom: 10px;
	}

	.setAvatar {
		display: flex;
		justify-content: flex-end;
	}

	.avatar {
		align-items: center;
		justify-content: center;
		margin: 22px 0;
		width: 100%;
	}

	.item {
		width: 700rpx;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.genderBox {
		display: flex;
		justify-content: space-between;
		width: 100%;
		font-size: 14px;
		color: #3b4144;
		overflow: hidden;
	}
	.ubtn-bottom{
		margin: 10px 0;
	}
	
	.color {
		color: #ffffff;
		background-color: #c33864;
		border-color: #c33864;
		font-size: 12px;
	}
</style>
<template>
	<view class="warp">
		<image :src="sysSetting.welcomePic" mode="widthFix" class="img"></image>
		<view class="content">
			<rich-text :nodes="sysSetting.welcomeDes"></rich-text>
		</view>
		<uni-section title="基本信息设置" sub-title="" type="line">
			<view class="section">
				<view class="avatar">
					<uni-id-pages-avatar width="260rpx" height="260rpx"></uni-id-pages-avatar>
				</view>
				<uni-list style="margin-bottom: 10px;">
					<uni-list-item class="item" @click="setNickname('')" title="昵称" :rightText="userInfo.nickname||'未设置'"
						link>
					</uni-list-item>
					<uni-list-item class="item" @click="bindMobile" title="手机号" :rightText="userInfo.mobile||'未绑定'" link>
					</uni-list-item>
					<uni-list-item class="item">
						<template v-slot:body>
							<view class="genderBox">
								<text>性别</text>
								<uni-data-checkbox :modelValue="gender" :localdata="localGender" @change="changeGender" />
							</view>
						</template>
					</uni-list-item>
				</uni-list>
				<uni-id-pages-agreements scope="register" ref="agreements"></uni-id-pages-agreements>
				<view class="ubtn-bottom">
					<!-- <button type="default" size="mini" @click="cancel">跳过</button> -->
					<button type="primary" size="mini" class="color" @click="okClick">进入程序</button>
				</view>
			</view>
		</uni-section>
		
		<uni-popup ref="dialog" type="dialog">
			<uni-popup-dialog mode="input" :value="userInfo.nickname" @confirm="setNickname"
				:inputType="setNicknameIng?'nickname':'text'" title="设置昵称" placeholder="请输入要设置的昵称">
			</uni-popup-dialog>
		</uni-popup>
		<uni-id-pages-bind-mobile ref="bind-mobile-by-sms" @success="bindMobileSuccess"></uni-id-pages-bind-mobile>
	</view>
</template>

<script>
	import {
		useUserStore
	} from '@/pinia/user.js'
	import {
		mapState,
		mapActions
	} from "pinia"
	// 解析链接中的参数
	let getQueryString = function(url, name) {
		var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
		var r = url.substr(1).match(reg)
		if (r != null) {
			return r[2]
		}
		return null;
	}
	const db = uniCloud.database();
	
	
	export default {
		data() {
			return {
				inviteCode: '',
				uniIdRedirectUrl: '',
				setNicknameIng: false,
				localGender: [{
					text: "男",
					value: 1
				}, {
					text: "女",
					value: 2
				}],
				isMounted: false
			}
		},
		mounted() {
			this.isMounted = true
			// console.log('sysSetting.welcomePic',this.sysSetting)
		},
		onLoad(op) {
			console.log('op++', op)
			// if (!op.inviteCode) {
			// 	console.log('op++--', op.inviteCode)
			// 	this.inviteCode = op.inviteCode
			// } else {
				let qUrl = decodeURIComponent(op.q)
				let inviteCode = getQueryString(qUrl, 'inviteCode')
				if (inviteCode) {
					this.inviteCode = inviteCode //扫描进来的存在
				}
			// }
			console.log(this.inviteCode)
			this.loginBefore()
		},
		computed: {
			...mapState(useUserStore, ['loginSuccess', 'userInfo',"sysSetting"]),
			gender() {
				return this.userInfo.gender || 0
			},
			agree: {
				get() {
					if (this.isMounted) {
						if (this.$refs.agreements) {
							return this.$refs.agreements.isAgree
						} else {
							return true
						}
					}
				},
				set(agree) {
					if (this.$refs.agreements) {
						this.$refs.agreements.isAgree = agree
					} else {
						console.log('不存在 隐私政策协议组件');
					}
				}
			},
			isTo(){
				return this.userInfo?.mobile && this.userInfo?.nickname&& this.userInfo?.avatar_file && this.userInfo?.gender
			}
		},
		methods: {
			...mapActions(useUserStore,['updateUserInfo']),
			async okClick(){
				uni.showLoading()
				// let res = await db.collection("uni-id-users").where(`nickname!="" && mobile!="" && avatar_file!="" && _id == "${this.userInfo._id}"`).field("nickname").get()
				// console.log("nickname====>>>",res.result.data);
				uni.hideLoading()
				// if(res.result.data.length == 0){
				if(!this.isTo){
					return uni.showModal({
						title:"提示",
						content:"手机,昵称,性别必须要填写",
						showCancel:false
					})
				}
				console.log(this.agree)
				if(!this.agree){
					this.$refs.agreements.popup()
					return
				}
				uni.switchTab({
					url:"/pages/grid/index"
				})
			},
			setNickname(nickname) {
				if (nickname) {
					this.updateUserInfo({
						nickname
					})
					this.setNicknameIng = false
					this.$refs.dialog.close()
				} else {
					this.$refs.dialog.open()
				}
			},
			bindMobile() {
				this.$refs['bind-mobile-by-sms'].open()
			},
			bindMobileSuccess() {
				this.updateUserInfo()
			},
			changeGender(e) {
				let gender = e.detail.value
				this.updateUserInfo({
					gender
				})
			},
			loginBefore() {
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				let _that = this
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: async res => {
						console.log("res", res)
						await _that.login({
							code: res.code,
							inviteCode: _that.inviteCode,
						})
					},
					fail: (err) => {
						console.log(err);
					},
					complete: () => {}
				});
			},
			async login(params) { //联网验证登录
				let _that = this
				const uniIdCo = uniCloud.importObject("uni-id-co", {
					customUI: true
				})
				uniIdCo.loginByWeixin(params)
					.then(result => {
						_that.loginSuccess({
							uniIdRedirectUrl: _that.uniIdRedirectUrl,
							autoBack: false
						})
					})
					.catch(e => {

					})
					.finally(e => {
						uni.hideLoading()
					})
			}
		}
	}
</script>